<template>
	<view class="f26r col313131 pb120r">
		<navbar background="background-image: linear-gradient(to right, #2c6739, #99c043);"
			title="会员卡详情" back @onBack="goBack"
		></navbar>
		<view class="p20r">
			<swiper class="h300r" :indicator-dots="true" :autoplay="true">
				<swiper-item class="">
					<image :src="optionItem.thumb ? optionItem.thumb : '/static/images/logo.png'"
						mode="aspectFill"
						class="wPer100 hPer100 borRad10r "
						@click="seeImgFun"
					></image>
				</swiper-item>
			</swiper>
			<view class="backColWhite lh80r borRad10r teAliCenter mt20r foWeiBold">
				立即开通所有门店通用会员月卡 享VIP特权（{{
					optionItem.status == 1 ? '购买' :
				    optionItem.status == 2 ? '赠送' : optionItem.status
				}}）
			</view>
			<view class="backColWhite borRad10r overHid mt20r">
				<view class="lh80r backImgLiGrTR2c6739a99c043 colFff pl20r">
					所有门店通用会员月卡优惠权益
				</view>
				<view class="pl20r pr20r">
					<!-- <view class="disFlex aliItCenter pt10r pb10r borB1SE5e5e5">
						<view class="w90r">
							<image :src="baseUrl + 'iconPercentageGreen.png'" mode="aspectFit"
								class="wPer100 h90r"
							></image>
						</view>
						<view class="flex1 pl20r">
							<view class="foWeiBold">
								预计5.00折
							</view>
							<view class="f24r mt5r">
								例如每小时100元，可优惠50.00元
							</view>
						</view>
					</view> -->
					<view class="disFlex aliItCenter pt10r pb10r">
						<view class="w90r">
							<image :src="baseUrl + 'iconMonthGreen.png'" mode="aspectFit"
								class="wPer100 h90r"
							></image>
						</view>
						<view class="flex1 pl20r">
							<view class="foWeiBold">
								有效期{{optionItem.month}}个月
							</view>
							<view class="f24r mt5r">
								购买日期算起，所有门店通用会员月卡有效期{{optionItem.month}}个月
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="backColWhite borRad10r mt20r pl20r pr20r pb20r" v-if="optionItem.text">
				<view class="lh80r col99c043 f30r foWeiBold">
					会员卡描述
				</view>
				<view class="lh50r" v-for="(item, index) in optionItem.txtAry" :key="index">
					{{item}}
				</view>
				<view class="lh50r col999 teAliCenter" v-if="!optionItem.txtAry">
					暂无描述
				</view>
			</view>
			<!-- <view class="backColWhite borRad10r mt20r pl20r pr20r pb20r">
				<view class="lh80r pl20r col99c043">
					使用权益
				</view>
				<view class="">
					1、会员月卡享有平台预订茶室5折优惠；
				</view>
				<view class="mt5r">
					2、会员月卡自开通之日起有效期30天；
				</view>
				<view class="mt5r">
					3、会员卡过期后未续费将自动降为普通用户；
				</view>
				<view class="mt5r">
					4、会员月卡有效期内，不限制权益次数；
				</view>
				<view class="mt5r">
					5、使用会员月卡续单享受折扣优惠；
				</view>
			</view>
			<view class="backColWhite borRad10r mt20r pl20r pr20r pb20r">
				<view class="lh80r pl20r col99c043">
					使用权益
				</view>
				<view class="">
					1、在线支付或续费立即开通会员，所有门店通用；
				</view>
				<view class="mt5r">
					2、一经售出概不退款，仅预订茶室/K歌房特惠使用；
				</view>
				<view class="mt5r">
					3、适用于周一至周日；
				</view>
			</view> -->
		</view>
		<view class="h100r wPer100 poFixed bom0 left0 backColWhite pl20r pr20r disFlex boSiBorBox borT1SE5e5e5">
			<view class="flex1 f24r disFlex pr20r aliItCenter">
				<view class="flex1">
					<view class="">
						<text class="col7b7b7b">
							付款方式：
						</text>
						微信支付
					</view>
					<view class="">
						所有门店通用会员月卡优惠权益
					</view>
				</view>
				<view class="teAliRight colFf3627 f34r foWeiBold">
					¥{{optionItem.price}}
				</view>
			</view>
			<view class="w150r pt10r">
				<view @click="cliActivateNow"
					class="wPer100 colFff teAliCenter borRad10r lh80r backImgLiGrTR2c6739a99c043"
				>
					立即开通
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import navbar from '@/components/navbar.vue'
import { baseUrl } from '@/utils/request.js'
import { toCardruleWechatpayment } from '@/utils/api.js'
export default {
	components: { navbar },
	data() {
		return {
			baseUrl,
			token: '',
			optionItem: {}
		}
	},
	onLoad(options) {
		if(options.item) {
			this.optionItem = JSON.parse(options.item)
			if(this.optionItem.text) this.optionItem.txtAry = this.optionItem.text.split('|');
			console.log('options', this.optionItem)
		}
	},
	onShow() {
		const token = uni.getStorageSync('token');
		if(token) {
			this.token = token;
		}else {
			this.token = '';
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		seeImgFun() {
			uni.previewImage({
				current: 0, urls: (this.optionItem.thumb ? [this.optionItem.thumb] : ['/static/images/logo.png'])
			})
		},
		cliActivateNow() {
			toCardruleWechatpayment({
				token: this.token,
				id: this.optionItem.id
			}).then(res1 => {
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: res1.data.timeStamp,
					nonceStr: res1.data.nonceStr,
					package: res1.data.package,
					signType: res1.data.signType,
					paySign: res1.data.paySign,
					success:res2 => {
						console.log(22, res2);
						uni.showModal({
							title: '提示', content: '支付成功', showCancel: false,
							confirmColor: '#99c043',
							success:res3 => { }
						})
					},
					fail:err2 => {
						console.log('支付失败-err2', err2);
						uni.showModal({
							title: '支付失败', content: '您已取消支付', showCancel: false,
							confirmColor: '#99c043',
							success:res3 => { }
						})
					}
				})
			})
		}
	}
}
</script>
<style>
</style>